<template>
	<view class="content">
		<view class="right-content">
			<!-- 头部 -->
			<view class="top-header-box" :style="{paddingTop:topXp+'px',height:topXp+45+'px'}">
				<view class="top-header">
					<view class="top-header-left" @click.stop="toLeftFun">
						<image style="width: 20px;height: 20px;" src="../../static/ai_index_icon_record@2x.png" mode="widthFix"></image>
					</view>
					<view class="top-header-center">
						<view :class="['top-header-item', tabIndex == item.id ? 'top-header-ative' : '' ]" v-for='item in HeadersData' :key="item" @click.stop="ativeItem(item)">
							{{item.name}}
						</view>
					</view>
					<view class="top-header-right">
						<image v-if="tabIndex == 1" style="width: 20px;height: 20px;margin-right: 10px;" @click.stop="gotoSearch" src="../../static/assist_icon_search@2x.png" mode="widthFix"></image>
						<image style="width: 20px;height: 20px;"  @click.stop="gotomy" src="../../static/ai_index_icon_user@2x.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="content-box" >
				<!-- 对话 -->
				<Chat ref="mescrollItem0" :i="0" :index="tabIndex" :topXp="topXp" :dialog_ident="ident" :welcome_message="welcome_message"></Chat>
				<!-- 助手 -->
				<Assistant ref="mescrollItem1" :i="1" :index="tabIndex" :topXp="topXp"></Assistant>
				<!-- 社区 -->
				<Community ref="mescrollItem2" :i="2" :index="tabIndex" :topXp="topXp"></Community>
			</view>
		</view>
		
		<view class="ai-alert-box" v-if="xieyi_tf && !user_id">
			<view class="ai-alert-box-content">
				<view class="ai-alert-title">易通AI隐私协议</view>
				<view class="ai-content-text">
					<view>欢迎使用易通AI！</view>
					<view>在开始使用前，请您认真阅读 <text @click="gotoxiyi('用户协议')">《易通AI用户协议》</text>和 <text @click="gotoxiyi('用户信息保护政策')">《易通AI用户信息保护政策》</text>，
					了解我们的规则和我们对于用户信息的使用情况、一级您所
					享有的相关权利。如您同意，请点击“同意”开始
					体验。</view>
				</view>
				<view class="tongyi-btn-box">
					<view class="tongyi-btn" @click="xieyi_tf = false" style="background: #E6E6E6;color: #999;">
						不同意
					</view>
					<view class="tongyi-btn" @click="xieyi_tf = false" style="background: #376FFF;color: #fff;">
						同意
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	//多个mescroll
	import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";
	import Chat from '@/components/chat/chat.vue'
	import Assistant from '@/components/assistant/assistant.vue'
	import Community from '@/components/community/community.vue'
	import http from '../../api/api-index.js'
	
	export default {
		mixins: [MescrollMoreMixin], // 使用mixin
		components:{
			Chat,
			Assistant,
			Community
		},
		data() {
			return {
				topXp:0,
				leftXp:'5%',
				toLeft:'-100%',
				is_left:false,
				screenWidth:0,
				windowHeight:0,
				leftWidth:'',
				tabIndex:0,
				HeadersData:[
					{id:0,name:'对话'},
					{id:1,name:'助手'},
					{id:2,name:'社区'},
				],
				ident:'',//易通AI助手
				welcome_message:'易通AI助手',
				user_id:'',
				xieyi_tf:false,//协议
			}
		},
		onShow() {
			this.user_id = uni.getStorageSync('uid')
		},
		onLoad() {
			let _this = this
			this.getTop()
			//获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					_this.windowHeight = res.windowHeight
					_this.screenWidth = res.screenWidth
				}
			})
			this.xieyi_tf = true
		},
		methods: {
			getTop(){
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.topXp = menuButtonInfo.height + menuButtonInfo.top
			},
			toLeftFun(){
				uni.navigateTo({
					url:'/pages/history/history'
				})
			},
			ativeItem(item){
				this.tabIndex = item.id
			},
			gotomy(){
				uni.navigateTo({
					url:'/pages/my/my'
				})
			},
			gotoxiyi(item){
				uni.navigateTo({
					url:'/pages/xieyi/xieyi?name='+item
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		height: 100vh;
		.right-content{
			width: 100%;
			height: 100%;
			.top-header-box{
				position: fixed;
				z-index: 9990;
				top: 0;
				right: 0;
				transition: 0.5s;
				width: 100%;
				background-image:url(https://ai.ytslgz.cn/static/xcx/xcx_bg.png);
				background-repeat: no-repeat;
				background-size: cover;
				overflow: hidden;
				box-sizing: border-box;
				.top-header{
					width: 100%;
					height: 45px;
					display: flex;
					flex-direction: row;
					color: #999;
					font-size: 16px;
					font-weight: bold;
					text-align: center;
					position: absolute;
					z-index:3;
					.top-header-left{
						width: 50px;
						height: 100%;
						line-height: 45px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
					.top-header-center{
						width: calc(100% - 120px);
						height: 100%;
						display: flex;
						flex-direction: row;
						justify-content: center;
						.top-header-item{
							width: 55px;
							height: 38px;
							line-height: 38px;
							margin-left: 20px;
							position: relative;
						}
						.top-header-item:nth-child(1){
							margin-left: 0px;
						}
						.top-header-ative{
							color: #000 !important;
							font-size: 20px;
						}
						.top-header-ative::before{
							content: '';
							width: 40%;
							height: 3px;
							border-radius: 2px;
							background: $main-color;
							position: absolute;
							bottom: -2px;
							left: 30%;
						}
					}
					.top-header-right{
						width: 70px;
						height: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;
						box-sizing: border-box;
						padding-right: 20px;
					}
				}
			}
		}
		.content-box{
			width: 100%;
			position: relative;
			// overflow: hidden;
		}
		.ai-alert-box{
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0,0,0,0.8);
			z-index: 9991;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.ai-alert-box-content{
				width: 90%;
				background: #fff;
				box-sizing: border-box;
				padding: 25px;
				margin-top: -30%;
				border-radius: 15px;
				.ai-alert-title{
					width: 100%;
					text-align: center;
					font-size: 18px;
					color: #000;
					font-weight: bold;
					margin-bottom: 20px;
				}
				.ai-content-text{
					font-size: 14px;
					line-height: 25px;
					text{
						color: $main-color;
					}
				}
			}
			.tongyi-btn-box{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-top: 20px;
				.tongyi-btn{
					width: 135px;
					height: 45px;
					text-align: center;
					line-height: 45px;
					font-size: 16px;
					border-radius: 23px;
				}
			}
		}
	}
	
</style>
